import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 应用实例
let app = null

// 渲染函数
function render(props = {}) {
  const { container, actions } = props
  
  // 创建应用实例
  app = createApp(App)
  
  // 如果有全局状态通信对象，挂载到全局
  if (actions) {
    window.mainActions = actions
  }
  
  // 挂载应用
  app.use(router)
    .mount(container ? container.querySelector('#app') : '#app')
}

// 独立运行时直接渲染
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

/**
 * qiankun 生命周期钩子 - 初始化
 */
export async function bootstrap() {
  console.log('user-app 初始化')
}

/**
 * qiankun 生命周期钩子 - 挂载
 * @param {Object} props 主应用传递的参数
 */
export async function mount(props) {
  console.log('user-app 开始挂载，接收参数:', props)
  
  // 监听主应用传递的全局状态
  props.actions.onGlobalStateChange((state, prevState) => {
    console.log('user-app 监听到全局状态变化:', state, prevState)
    
    // 根据全局主题更新样式
    if (state.theme) {
      document.documentElement.setAttribute('data-theme', state.theme)
    }
  }, true)
  
  // 向主应用发送消息
  props.actions.setGlobalState({
    user: {
      ...props.actions.getGlobalState().user,
      currentModule: 'user-app'
    }
  })
  
  // 渲染应用
  render(props)
}

/**
 * qiankun 生命周期钩子 - 卸载
 */
export async function unmount() {
  console.log('user-app 开始卸载')
  app.unmount()
  app = null
}

/**
 * qiankun 生命周期钩子 - 应用更新（可选）
 */
export async function update(props) {
  console.log('user-app 开始更新，接收参数:', props)
}
